<template>
  <div>
    <div class="detail-info" style="margin-top: 43px">
      <div class="form-item">
        <h4>发放基础信息</h4>
        <el-form label-width="180px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="所属分公司">
                <span>{{this.detailData.branchName}}</span>
              </el-form-item>
              <el-form-item label="所属部门">
                <span>{{this.detailData.deptName}}</span>
              </el-form-item>
              <el-form-item label="批次名称">
                <span>{{this.detailData.pcname}}</span>
              </el-form-item>
              <el-form-item label="客资类型">
                <span>{{this.detailData.usertypeName}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="促销费用">
                <span>{{this.detailData.cxcostName}}</span>
              </el-form-item>
              <el-form-item v-if="this.detailData.gysproportion !== 0" label="供应商占比">
                <span>{{this.detailData.gysproportion}}%</span>
              </el-form-item>
              <el-form-item label="活动起止日期">
                <span>{{this.timeDeltSecond(this.detailData.startDate)}}</span>-
                <span>{{this.timeDeltSecond(this.detailData.overDate)}}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <div class="detail-info" style="margin-top: 43px">
      <div class="form-item">
        <h4>优惠券信息</h4>
        <el-table :data="this.detailData.redeemCodeDetails" border>
          <el-table-column prop="qid" label="优惠券ID" align="center" width="90"></el-table-column>
          <el-table-column prop="ticketName" label="优惠券名称" align="center" width="100"></el-table-column>
          <el-table-column prop="ticketType" label="优惠券类型" align="center" width="100"></el-table-column>
          <el-table-column prop="ticketCost" label="面值" align="center" width="50"></el-table-column>
          <el-table-column prop="ticketPrice" label="满多少元可用" align="center"></el-table-column>
          <el-table-column prop="numLimit" label="满多少件可用" align="center"></el-table-column>
          <el-table-column prop="expirationType" label="有效期类型" align="center">
            <template scope="scope" >
              <span v-if="scope.row.expirationType===1">时间段</span>
              <span v-if="scope.row.expirationType===2">截止时间</span>
              <span v-if="scope.row.expirationType===3">天数</span>
            </template>
          </el-table-column>
          <el-table-column label="有效期" align="center">
            <template scope="scope">
              <span v-if="scope.row.expirationType===1">{{timeDeltSecond(scope.row.beginDate)}}-{{timeDeltSecond(scope.row.endDate)}}</span>
              <span v-if="scope.row.expirationType===2">{{timeDeltSecond(scope.row.endDate)}}</span>
              <span v-if="scope.row.expirationType===3">{{scope.row.daynum}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="num" label="每人/张数" align="center" width="90"></el-table-column>
          <el-table-column prop="createUser" label="建券人" align="center" width="70"></el-table-column>
          <!-- <el-table-column prop="" label="已兑换张数" align="center" width="100"></el-table-column> -->
        </el-table>
      </div>
    </div>
    <div class="detail-info" style="margin-top: 43px;margin-bottom:80px">
      <div class="form-item">
        <h4>审核信息</h4>
        <el-table :data="detailData.auditInfo" border>
          <el-table-column prop="auditor" label="审核人名称" align="center"></el-table-column>
          <el-table-column prop="content" label="任务内容" align="center"></el-table-column>
          <el-table-column prop="resultName" label="审核结果" align="center"></el-table-column>
          <el-table-column prop="opinion" label="审核意见" align="center"></el-table-column>
          <el-table-column prop="auditTime" label="审核时间" align="center"></el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
  import { activity } from '../../../../config/proxy.js'
  import { mapState } from 'vuex'
  import mixins from '../../../../components/mixins.vue'
  export default {
    mixins: [mixins],
    data () {
      return {
        detailData: []
      }
    },
    methods: {
      searchDetail (id) {
        activity.yhqhd.zcfq.detail({id: id}, (res) => {
          console.log(res, '详情')
          if (res.message === 'ok') {
            this.detailData = res.content
            this.showBranchName = res.content.branchName // 创建时公司是返回的公司名称
            this.showDeptName = res.content.deptName // 创建时部门名称是返回的部门名称
            // this.detailDialog = true
          } else {
            this.message('查看详情失败', 'error')
          }
        })
      },
      timeDeltSecond (d) { // 时间去秒
        if (d) {
          return d.split(' ')[0]
        }
      },
      message (text, type) { // 消息提示
        this.$message({
          showClose: true,
          message: text,
          type: type
        })
      }
    },
    created () {
      console.log(this.$store.state.tab.uid)
      this.searchDetail(this.$store.state.tab.uid)
    },
    computed: mapState({
      userName: function (state) {
        if (!state.user.info.user_name) {
          this.$store.dispatch('SET_TOKEN')
        }
        return state.user.info.user_name
      },
      branchName: function (state) {
        return state.user.info.branchId === 1 ? '总公司' : state.user.info.branchName
      },
      branchId: function (state) {
        return state.user.info.branchId
      },
      deptName: function (state) {
        return state.user.info.parOrgName
      },
      deptId: function (state) {
        return state.user.info.or_org_id
      }
    })
  }
</script>
<style>

</style>
